<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      form {
        width: 400px;
        margin: 0 auto; /* 水平居中 */
        border: 1px solid #ccc; /* 灰色边框 */
        padding: 20px; /* 内边距，避免内容贴边 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 浅阴影，增强立体感 */
      }

      strong {
        display: inline-block;
        width: 70px;
        text-align: right;
      }
      span {
        color: red;
      }
      .wsd {
        color: blue;
      }
      .lov {
        width: 160px;
        text-align: right;
      }
      .cbw {
        vertical-align: middle;
        width: 25px;
        cursor: pointer;
      }
      #capcha {
        background-color: rgb(217, 43, 226);
        color: blue;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <form action="wda.html" method="get">
      <span class="wsd">欢迎注册会员</span>
      <div>
        <label>
          <strong>手机号码:</strong><input type="password" name="pwd"
          maxlength="11" placeholder=" 11位手机号" /required /> </label
        ><span>必填</span>
      </div>
      <div>
        <label>
          <strong>创建密码:</strong><input type="password" name="code"
          maxlength="8" placeholder=" 8位密码" /required /> </label
        ><span>必填</span>
      </div>

      <div>
        <label>
          <strong>注册邮箱:</strong><input type="email" placeholder="例如：wustzz@sina.com"/required> </label
        ><span>必填</span>
      </div>
      <div>
        <label>
          <strong>验证码:</strong
          ><input type="password" name="code" maxlength="4" />
        </label>
        <span id="capcha"></span>
        <img class="cbw" src="images/arrow_03.png" id="change_capcha" alt="" />
       
       <script>
          let codeStr =
            "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
          //验证码长度
          let length = 4;
          let capcha = document.getElementById("capcha");
          let change_capcha = document.getElementById("change_capcha");
          // 用来生成一个[n,m]随机整数
          function getRandom(n, m) {
            return parseInt(Math.random() * (m - n + 1) + n);
          }
          // 将随机生成的整数下标对应的字母放入span中
          function getCode() {
            let str = "";
            // 验证码有几位就循环几次
            for (let i = 0; i < length; i++) {
              let index = getRandom(0, 61);
              str += codeStr.charAt(index);
            }
            capcha.innerHTML = str;
          }
          // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
          getCode();
          // 点击刷新验证码
          capcha.addEventListener("click", getCode);
          change_capcha.addEventListener("click", getCode);
        </script>
      </div>
      
      <div>
        <label
          ><strong>性别:</strong>
          <input type="radio" name="sex" value="male" /> 男
          <input type="radio" name="sex" value="female" /> 女</label
        >
      </div>
      <div>
        <label
          ><strong>生日:</strong><input type="date" style="width: 165px"
        /></label>
      </div>
      <div>
        <label>
          <strong>年龄:</strong
          ><input
            type="number"
            min="1"
            max="100"
            step="1"
            style="width: 162px"
          />
        </label>
      </div>
      <div>
        <label>
          <strong>籍贯:</strong
          ><select name="province" style="width: 85px">
            <option value="0">湖北省</option>
            <option value="1">广东省</option>
            <option value="2">福建省</option></select
          ><select name="province" style="width: 85px">
            <option value="0">武汉</option>
            <option value="1">广州</option>
            <option value="2">深圳</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          <strong>个人学历:</strong
          ><select name="province" style="width: 170px">
            <option value="0">本科</option>
            <option value="1">高中</option>
            <option value="2">中学</option>
          </select></label
        >
      </div>
      <div>
        <strong>月薪:</strong>
        <input
          type="range"
          id="score"
          name="score"
          min="0.0"
          max="30000"
          step="100"
          value="15000"
        />
        <span id="msg"></span>
        <script>
          var msg = document.getElementById("msg"); // 根据id值找到span元素
          window.onload = function () {
            msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
          };
          document.getElementById("score").onchange = function () {
            msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
          };
        </script>
      </div>
      <div>
        <strong>个人爱好:</strong>
        <input type="checkbox" name="like" value="sing" />唱歌
        <input type="checkbox" name="like" value="run" />跑步
        <input type="checkbox" name="like" value="swim" />游泳
      </div>

      <label for="avatar"><strong>个人照片:</strong></label>
      <input type="file" id="avatar" name="avatar" accept="image/*" required />
      <img
        id="previewImage"
        src=""
        alt="预览"
        style="
          max-width: 100px;
          max-height: 100px;
          display: none;
          text-align: center;
        "
      />
      <script>
        const form = document.getElementById("uploadForm");
        const fileInput = document.getElementById("avatar");
        const previewImage = document.getElementById("previewImage");
        const noImage = document.getElementById("noImage");
        const statusDiv = document.getElementById("status");
        // 当用户选择文件时，预览图片
        fileInput.addEventListener("change", function () {
          const file = this.files[0];
          if (file) {
            const reader = new FileReader();

            reader.onload = function (e) {
              previewImage.src = e.target.result; // 设置图片源
              previewImage.style.display = "block";
              noImage.style.display = "none";
            };

            reader.readAsDataURL(file); // 读取为 Data URL
          } else {
            clearPreview();
          }
        });

        // 提交表单（模拟上传）
        form.addEventListener("submit", function (e) {
          e.preventDefault(); // 阻止默认提交（防止页面刷新）
          const file = fileInput.files[0];
          if (!file) {
            statusDiv.innerHTML =
              '<span style="color: red;">请先选择图片！</span>';
            return;
          }
          // 模拟上传过程
          statusDiv.innerHTML = `正在上传图片：${file.name}（${(
            file.size / 1024
          ).toFixed(1)} KB）...`;

          // 模拟网络延迟1.5秒
          setTimeout(() => {
            statusDiv.innerHTML = `<span style="color: green;">✅ 图片 "${file.name}" 上传成功！</span>`;
          }, 1500);
        });
      </script>

      <div>
        <table>
          <td><strong>个人简介:</strong></td>
          <td><textarea name="intro" cols="25" rows="8"></textarea></td>
        </table>
      </div>
      <div class="lov">
        <input type="submit" value="提交" />
        <input type="reset" value="重填" />
      </div>
    </form>
  </body>
</html>
